<template>
	<div class="agent-wrap">
		<div class="agent-detail">
			<div class="agent-modular">
				<!-- <h2 class="agent-tit">账户信息</h2> -->
				<!-- :class="{ choose: chooseIndex == index }" -->
				<div class="agent-modular-items" @click="chooseCard(item)" v-for="(item, index) in list" :key="index">
					<!--					<div class="agent-modular-item">-->
					<!--						<span class="tit">账户类型</span>-->
					<!--						<span class="intro">{{agentInfoForm.accountType === 1 ? '对私' : agentInfoForm.accountType === 2 ? '对公' : '-'}}</span>-->
					<!--					</div>-->
					<div class="agent-modular-item">
						<span class="tit">账户户名</span>
						<span class="intro">{{ item.accountName }}</span>
					</div>
					<div class="agent-modular-item">
						<span class="tit">结算账号</span>
						<span class="intro">{{ item.accountNo }}</span>
					</div>

					<!--					<div class="agent-modular-item">-->
					<!--						<span class="tit">开户行行号</span>-->
					<!--						<span class="intro ">{{agentInfoForm.bankno}}</span>-->
					<!--					</div>-->
					<div class="agent-modular-item">
						<span class="tit">开户行名称</span>
						<span class="intro">{{ item.bankName }}</span>
					</div>
					<div class="mask-d" :class="[item.isSelf == 1 ? 'me' : 'noMe']">{{ item.isSelf == 1 ? '本人' : '他人' }}</div>
					<template v-if="type != 'withdraw'">
						<span class="icon edit iconfont icon-xiugai" @click.stop="setHandle(item)" v-if="item.isSelf == 1"></span>
						<span class="icon delete iconfont icon-shanchu" @click.stop="deleteHandle(item)" v-if="item.isSelf != 1"></span>
					</template>
				</div>
			</div>

			<!-- 	<button v-if="this.type == 'myInfo'" class="myBtn update-btn" @click="toUpdate()">修改</button> -->
		</div>
		<div class="add-box" @click="addHandle" v-if="type != 'withdraw'">
			<div class="add flex-align-center">
				<span class="icon1 iconfont icon-tianjia"></span>
				{{ hasMyCard ? '添加他人结算卡' : '添加本人结算卡' }}
				<span class="icon-Downarrow-R iconfont icon-tianjia"></span>
			</div>
		</div>
	</div>
</template>

<script>
import { editAccount, agentInfo, settlementDelOther } from '_a/myInfo';
import { regBank } from '_c/utils/validate';
export default {
	name: 'SettlementAccount',
	components: {},
	data() {
		return {
			agentInfoForm: {},
			bankCard: '',
			bankCardShow: false,
			bankType: '',
			btnIsShow: false,
			type: 'myInfo', //myInfo , withdraw
			chooseIndex: 0,
			list: [],
			hasMyCard: true
		};
	},
	onLoad(o) {
		this.type = o.type || 'myInfo';
		let title;
		switch (this.type) {
			case 'myInfo':
				title = '结算账户';
				break;
			case 'withdraw':
				title = '选择结算账户';
				break;
			default:
				break;
		}
		uni.setNavigationBarTitle({
			title
		});
	},
	onShow() {
		this.agentInfoHandle();
	},
	methods: {
		chooseCard(item) {
			if (this.type == 'withdraw') {
				uni.$emit('chooseCard', item);
				this.$nav.goBack();
			}
		},
		addHandle() {
			if(this.list.length>=6){
				return this.$tip.toast('最多添加5张他人结算卡!')
			}
			this.$nav.push({
				path: '/pages/myInfo/bindCard/bindCard',
				query: {
					type: this.list.length ? 'noMe' : 'me'
				}
			});
		},
		deleteHandle(row) {
			// console.log(row);
			let params = {
				accountNo: row.accountNo
			};
			this.$tip
				.modal({
					content: `是否确认删除${row.accountNo}卡号吗`
				})
				.then(() => {
					return settlementDelOther(params);
				})
				.then(() => {
					this.$store.dispatch('getUserDetail').then(res => {
						this.$tip.toast('删除成功', 'success');
						this.agentInfoHandle();
					});
				});
		},
		setHandle(item) {
			this.$storage.setStore('cardInfo', item);
			this.$nav.push({
				path: '/pages/myInfo/bindCard/bindCard',
				query: {
					type: 'me'
				}
			});
			// this.$refs.addCard.handleUpdate('me', item);
		},
		agentInfoHandle() {
			if (this.$store.getters.userInfo.settlementList) {
				this.list = this.$store.getters.userInfo.settlementList.map(item => {
					return item;
				});
				this.hasMyCard = this.list.some(item => item.isSelf == 1);
				this.agentInfoForm = JSON.parse(JSON.stringify(this.$store.getters.userInfo.settlement));
				const accountno = this.agentInfoForm.accountNo;
				const bankno = this.agentInfoForm.bankno;
				this.bankCard = this.agentInfoForm.accountNo;
				this.bankType = this.agentInfoForm.bankName;
				this.agentInfoForm.accountNo = accountno.substring(0, 4) + ' **** **** ' + accountno.substring(accountno.length - 4, accountno.length);
			}
		},
		bankChange() {},
		bankCard2() {
			// this.btnIsShow = true;
			// this.bankChange();
		},
		toUpdate() {
			this.$nav.push({
				path: '/pages/myInfo/bindCard/bindCard',
				query: {
					type: 'edit'
				}
			});

			// let message = "";
			// if (!this.bankType) {
			//   message = "请选择银行行别";
			// }
			// if (!this.bankCard) {
			//   message = "请输入卡号";
			// }
			// if (!regBank(this.bankCard)) {
			//   message = "结算卡格式错误";
			// }
			// if (message) {
			//   this.$tip.toast(message)
			//   return false;
			// }
			// editAccount({ accountno: this.bankCard, bankName: this.bankType }).then(
			//   (res) => {
			//     if (res.code === 200) {
			//       this.$tip.toast("修改成功")
			//       this.agentInfoHandle();
			//       this.btnIsShow = false;
			//       this.bankCardShow = false;
			//       setTimeout(() => {
			//         this.$nav.push({ path: "home" });
			//       }, 500);
			//     }
			//   }
			// );
		}
	}
};
</script>

<style lang="scss" scoped>
.agent-wrap {
	padding: R(20) 0 R(30);
}
.agent-modular .agent-tit {
	padding: R(20px);
	font-size: R(28px);
	color: #828282;
}

.agent-modular .agent-modular-items,
.add-box {
	padding-left: R(30px);
	padding-right: R(30px);
	background: #fff;
	margin: 0 R(20) R(20);
	border-radius: R(20);
	position: relative;
}
.mask-d {
	position: absolute;
	top: R(26);
	left: 27%;
	font-size: R(34px);
	letter-spacing: 6px;
	transform: rotate(-30deg);
	opacity: 0.4;
	border: 1px solid;
	text-align: center;
	padding: 1px R(10);
	border-radius: R(30);
}
.add-box {
	padding: R(30);
	.add {
		.iconfont {
			font-size: R(39);
		}
		.icon1 {
			margin-right: R(30);
		}
		.icon-Downarrow-R {
			margin-left: auto;
		}
	}
}
.me {
	color: #02e285;
}
.noMe {
	color: #f0a504;
}
.choose {
	border: 1px solid orangered;
}
.agent-modular .agent-modular-item {
	display: flex;
	min-height: R(100px);
	align-items: center;
	padding: 0 R(30px) 0 R(20);
	position: relative;
}

.agent-modular .agent-modular-item:after {
	content: '';
	position: absolute;
	display: block;
	background: #ddd;
	pointer-events: none;
	z-index: 1;
	height: 1px;
	left: 0;
	right: 0;
	bottom: 0;
}

.agent-modular .agent-modular-item:last-child:after {
	display: none;
}

.agent-modular .agent-modular-item span {
	display: block;
}

.agent-modular .agent-modular-item .intro {
	font-size: R(28px);
	color: #7b7b7b;
}

.agent-modular .agent-modular-item .tit {
	flex: 1;
	margin-right: R(20px);
	white-space: nowrap;
}

.agent-modular .agent-modular-item .tit .tips {
	display: block;
	font-size: R(24px);
	color: #999;
}

.update-btn {
	width: R(500px);
	margin: R(150px) auto;
}
.icon {
	font-size: R(40);
	position: absolute;
	right: 0;
	top: 0;
	padding: R(10);
	border-radius: 50%;
	color: #fff;
	z-index: 99;
}
.edit {
	background: $themeColor;
}
.delete {
	background: #ff6d6d;
}
</style>
